<template>
    <div class="advanced-condition-search">
        <div class="wrap">
            <div>高级搜索</div>
            <div>
                <!--引入普通搜索组件-->
                <condition-search-comp
                    v-model="userInput"
                    @enter-search="enterSearch"
                    :conditionTips="userInputPlacehoder"
                ></condition-search-comp>
                <span @click="showAdvancdSearch" class="advance-switch-class">高级</span>
            </div>

            <!-- 高级搜索内容 -->
            <div v-if="isShowAdvancdWidget">
                <div class="one-expression clearfix margin-top-20" v-for="(formItem,fIndex) in formDynamic" :key="fIndex">
                    <div class="keywordClass">
                        <Select  placeholder="选择字段" @on-change="checkValueType(formItem)" v-model="formItem.nameAndType">
                            <Option v-for="(conditionItem, cIndex) in conditions" :key="cIndex" :value="conditionItem.value+'@@@'+conditionItem.type">{{ conditionItem.name }}</Option>
                        </Select>
                        <!--{{formItem.searchExpress}}-->
                    </div>
                    <div class="expressionClass">
                        <Select  placeholder="选择语法" v-model="formItem.searchExpress">
                            <Option v-for="(expressItem, eIndex) in expressionList" :key="eIndex" :value="expressItem.key">{{ expressItem.title }}</Option>
                        </Select>
                        <!--{{formItem.searchName}}-->
                    </div>
                    <div class="valueClass">
                        <Input type="text" v-if="formItem.dataType !='Date'" v-model="formItem.searchValue" placeholder="输入关键字"></Input>
                        <DatePicker type="date" v-else v-model="formItem.searchValue"  format="yyyy-MM-dd" placeholder="选择日期" style="width: 200px"></DatePicker>
                        <!--{{formItem.searchValue}}-->
                    </div>
                    <div class="controll-wrap">
                    <span @click="handleAdd(fIndex)">
                        <Icon type="plus-circled" class="add-btn" ></Icon>
                    </span>
                        <span @click="handleRemove(fIndex)">
                        <Icon type="minus-circled" class="minus-btn" ></Icon>
                    </span>
                    </div>
                </div>

                <div class="clearfix margin-top-20">
                    <Button type="primary" @click="handleSubmit('formDynamic')">提交</Button>
                    <Button type="ghost" @click="handleCancel" style="margin-left: 8px">取消</Button>
                    <!--<z-button type="ensure" shape="rect" @on-click="handleSubmit('formDynamic')">提1交</z-button>-->
                    <!--<z-button type="cancel" shape="rect" @on-click="handleCancel">取2消</z-button>-->
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import conditionSearchComp from "./conditionSearchComp.vue"

    function getInitObject() {
        return {
            // 查询条件的名字
            searchName:"",
            // 查询条件的运算表达式
            searchExpress:"",
            // 查询条件的比对值
            searchValue:"",
            // 数据类型，判断是否为日期类型
            dataType:"",//Date,String,Number
            // searchName 和 类型 相加
            nameAndType: "@@@",
        };
    }

//    conditionSetting:[
//        {
//            name:"年龄",
//            type:"Date",
//            value:"ageForm"
//        },
//        {
//            name:"关键字",
//            type:"String",
//            value:"keyWordForm"
//        },
//        {
//            name:"数量",
//            type:"Number",
//            value:"countForm"
//        },
//    ],

    export default {
        props: {
            conditionSetting: {
                type: Array,
                default: function () {
                    return []
                }
            },
            // placeholder 提示信息
            conditionTips: {
                type: String,
                default: "请输入..."
            },
        },
        mounted: function () {
            this.conditions = this.conditionSetting;
            this.userInputPlacehoder = this.conditionTips;
        },
        data () {
            return {
                userInputPlacehoder:"",
                // 用户输入的值
                userInput:"",
                // 是否显示高级搜索
                isShowAdvancdWidget: false,
                // 运算符表达式
                expressionList: [
                    {
                        key: 'eq',
                        title: '等于'
                    },
                    {
                        key: 'ne',
                        title: '不等于'
                    },
                    {
                        key: 'lt',
                        title: '小于'
                    },
                    {
                        key: 'le',
                        title: '小于'
                    },
                    {
                        key: 'gt',
                        title: '大于'
                    },
                    {
                        key: 'ge',
                        title: '大于等于'
                    }
                ],
                // 传递过来的配置信息
                conditions:[],
                formDynamic: {
                    "0": getInitObject(),
                }
            }
        },
        watch:{
            conditionTips: function (newValue, oldValue){
                this.userInputPlacehoder = newValue;
            }
        },
        methods: {
            // 点击enter触发的事件
            enterSearch: function () {
                this.$emit("enter-search",this.userInput.trim());
            },
            // 显示高级搜索
            showAdvancdSearch: function (formItemObj) {
                // 显示高级搜索
                this.isShowAdvancdWidget = true;
                // 重置查询条件个数
                this.formDynamic = {
                    "0":{
                        // 查询条件的名字
                        searchName:"",
                        // 查询条件的运算表达式
                        searchExpress:"",
                        // 查询条件的比对值
                        searchValue:"",
                        // 数据类型，判断是否为日期类型
                        dataType:"",//Date,String,Number
                    }
                };
            },
            // 检查文件类型
            checkValueType: function (formItemObj) {
                // 如果是日期类型
                formItemObj.searchName = formItemObj.nameAndType.split("@@@")[0];
                formItemObj.dataType = formItemObj.nameAndType.split("@@@")[1];
                formItemObj.searchValue = "";
            },
            // 确定按钮触发的事件
            handleSubmit (name) {
                console.dir(this.formDynamic);
                // 如果是空标记
                var isNullFlag = false;
                // 遍历提交给使用者的数据
                for(var key in this.formDynamic){
                    var tempObj = this.formDynamic[key];
                    // 遍历一个查询条件，如果为空，提示用户需要完成或者删除掉
                    for(var key2 in tempObj){
                        if(isNullFlag){
                            break;
                        }
                        var value = null;
                        // 检查是否是字符串，如果是字符串，则去掉两端的空格
                        if(typeof tempObj[key2] == "string"){
                            value = tempObj[key2].trim();
                        }else{
                            value = tempObj[key2];
                        }
                        if(value == "" || value == undefined || value == null){
                            alert("请完善所有的查询条件");
                            isNullFlag  = true;
                            break;
                        }
                    }
                }
                this.$emit("ok-search",this.formDynamic);
            },
            // 取消按钮触发的事件
            handleCancel () {
                // 显示高级搜索
                this.isShowAdvancdWidget = false;
                // 重置查询条件个数
                this.formDynamic = {
                    "0":getInitObject()
                };
                this.$emit("cancel-search")
            },
            // 添加筛选条件
            handleAdd (index) {
                var newTempObj =  getInitObject();
                this.$set(this.formDynamic, new Date().getTime()+"", newTempObj);
            },
            // 删除筛选条件
            handleRemove (index) {
                if(Object.keys(this.formDynamic).length <=1 ){
                    alert("至少要有一个参数")
                }else{
                    delete this.formDynamic[index];
                    this.formDynamic = JSON.parse(JSON.stringify(this.formDynamic));
                }
            }
        },
        components:{
            conditionSearchComp
        }
    }
</script>

<style scoped lang="scss">
    /* 必须引用 SCSS基本语法 */
    @import '../../../zlst/style/styleKit.scss';
    .advanced-condition-search {
        .add-btn{
            color: $color-font1;
        }
        .minus-btn{
            color: $color-font7;
        }

        .one-expression {
            clear: both;
            .keywordClass {
                float: left;
                width: 112px;
                margin-right: 10px;
            }
            .expressionClass {
                float: left;
                width: 80px;
                margin-right: 10px;
            }
            .valueClass {
                float: left;
                width: 200px;
                margin-right: 10px;
            }
            .controll-wrap{
                position: relative;
                top: -3px;
                float: left;
                font-size: 28px;
            }
        }
        .margin-top-20 {
            margin-top: 20px;
        }
        .advance-switch-class{
            cursor: pointer;
        }
    }
</style>
